<template>
  <div class="mod-config">
    <div class="filter-container">
      <el-button-group>
        <el-button v-if="deptManager_btn_add" type="primary" icon="plus" @click="handlerAdd">添加
        </el-button>
        <el-button v-if="deptManager_btn_edit" type="primary" icon="edit" @click="handlerEdit">编辑
        </el-button>
        <el-button v-if="deptManager_btn_del" type="primary" icon="delete" @click="handleDelete">删除
        </el-button>
      </el-button-group>
    </div>

    <el-row>
      <el-col :span="8" style="margin-top:15px;">
        <el-tree style="height: 500px;overflow-y: auto;" :data="treeData" :props="defaultProps" :filter-node-method="filterNode"
          class="filter-tree" node-key="id" highlight-current default-expand-all @node-click="getNodeData" />
      </el-col>
      <el-col :span="16" style="margin-top:15px;">
        <el-card class="box-card">
          <el-form ref="form" :label-position="labelPosition" :rules="rules" :model="form" label-width="80px">
            <el-form-item label="父级节点" prop="parentId">
              <el-input v-model="form.parentId" disabled placeholder="请输入父级节点" />
            </el-form-item>
            <el-form-item v-if="formEdit" label="节点编号" prop="id">
              <el-input v-model="form.id" :disabled="formEdit" placeholder="节点编号" />
            </el-form-item>
            <el-form-item label="部门名称" prop="name">
              <el-input v-model="form.name" :disabled="formEdit" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="单位名称" prop="name">

              <avue-select v-model="form.unitId" :dic="unitOptions" :props="unitProps" placeholder="请选择单位" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
              <el-input v-model="form.sort" :disabled="formEdit" type="number" placeholder="请输入排序" />
            </el-form-item>
            <el-form-item label="编码" prop="code">
              <el-input v-model="form.code" :disabled="formEdit" placeholder="请输入编号"></el-input>
            </el-form-item>
            <el-form-item label="编号" prop="number">
              <el-input v-model="form.number" :disabled="formEdit" placeholder="请输入编号"></el-input>
            </el-form-item>
            <el-form-item label="建档部门" prop="showFlag">
              <el-radio-group v-model="form.showFlag">
                <el-radio label="1">是</el-radio>
                <el-radio label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="部门类型" prop="deptType">
              <el-select v-model="form.deptType" placeholder="请选择部门类型">
                <el-option v-for="item in deptTypeData" :key="item.id" :label="item.deptTypeName" :value="item.id">
                </el-option>
              </el-select>
              <!-- <avue-select
                v-model="form.deptType"
                :dic="deptTypeData"
                :props="unitProps"
                placeholder="请选择部门类型"/>-->
            </el-form-item>
            <el-form-item label="调整价格组价格标识" prop="priceFlag">
              <el-radio-group v-model="form.priceFlag">
                <el-radio :label="1">可调整所有价格组价格</el-radio>
                <el-radio :label="2">只能调整部门匹配的价格组价格</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="formStatus == 'update'">
              <el-button type="primary" @click="update">更新
              </el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
            <el-form-item v-if="formStatus == 'create'">
              <el-button type="primary" @click="create">保存
              </el-button>
              <el-button @click="onCancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { unitList } from '@/api/admin/unit'
  import { remote } from '@/api/admin/dict'
  import { mapGetters } from 'vuex'
  import {
    addObj,
    delObj,
    fetchTree,
    getObj,
    putObj,
    getDeptTypeList
  } from '@/api/admin/dept'

  export default {
    name: 'Dept',
    data() {
      return {
        list: null,
        total: null,
        formEdit: true,
        formAdd: true,
        formStatus: '',
        showElement: false,
        typeOptions: ['0', '1'],
        methodOptions: ['GET', 'POST', 'PUT', 'DELETE'],
        listQuery: {
          name: undefined
        },
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        unitProps: {
          label: 'name',
          value: 'id'
        },
        unitOptions: [],
        rules: {
          parentId: [{required: true,message: '请输入父级节点',trigger: 'blur'}],
          unitId: [{required: true,message: '请输入所属单位',trigger: 'blur'}],
          id: [{required: true,message: '请输入节点编号',trigger: 'blur'}],
          name: [{required: true,message: '请输入部门名称',trigger: 'blur'},
                {min: 3,max: 32,message: '长度在 3 到 32 个字符',trigger: 'blur'}],
          sort: [{required: true,message: '请输入排序值',trigger: 'blur'}],
          deptType: [{required: true,message: '请选择部门类型',trigger: 'blur'}],
          code: [{required: true,message: '请输入编码',trigger: 'blur'}],
          number: [{required: true,message: '请输入编号',trigger: 'blur'}],
        },
        deptTypeData: [],
        labelPosition: 'right',
        form: {
          name: undefined,
          sort: undefined,
          parentId: undefined,
          id: undefined,
          unitId: undefined,
          deptType: undefined,
          priceFlag: 2,
          showFlag: ""
        },
        currentId: 0,
        deptManager_btn_add: false,
        deptManager_btn_edit: false,
        deptManager_btn_del: false
      }
    },
    created() {
      this.getList()
      this.getUnitListData()
      this.getDeptType()
      this.deptManager_btn_add = this.permissions['sys_dept_add']
      this.deptManager_btn_edit = this.permissions['sys_dept_edit']
      this.deptManager_btn_del = this.permissions['sys_dept_del']
    },
    computed: {
      ...mapGetters(['elements', 'permissions', ])
    },
    methods: {
      getList() {
        fetchTree(this.listQuery).then(response => {
          if(response.data.code == '0'){
            this.treeData = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      getUnitListData() {
        unitList().then(response => {
          if(response.data.code == '0'){
            this.unitOptions = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      getNodeData(data) {
        if (!this.formEdit) {
          this.formStatus = 'update'
        }
        getObj(data.id).then(response => {
          if(response.data.code == '0'){
            this.form = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
        this.currentId = data.id
        this.showElement = true
      },
      handlerEdit() {
        if (this.form.id) {
          this.formEdit = false
          this.formStatus = 'update'
        }
      },
      handlerAdd() {
        this.resetForm()
        this.formEdit = false
        this.formStatus = 'create'
      },
      handleDelete() {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delObj(this.currentId).then(response => {
            if(response.data.code == '0'){
              this.getList()
              this.resetForm()
              this.onCancel()
              this.$notify({
                title: '成功',
                message: '删除成功',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message.error(response.data.msg)
            }
          })
        })
      },
      update() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          putObj(this.form).then(response => {
            if(response.data.code == '0'){
              this.getList()
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message.error(response.data.msg)
            }
          })
        })
      },
      create() {
        this.$refs.form.validate((valid) => {
          if (!valid) return
          addObj(this.form).then(response => {
            if(response.data.code == '0'){
              this.getList()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            }else{
              this.$message.error(response.data.msg)
            }
          })
        })
      },
      onCancel() {
        this.formEdit = true
        this.formStatus = ''
      },
      resetForm() {
        this.form = {
          parentId: this.currentId
        }
      },
      //获取部门类型
      getDeptType() {
        getDeptTypeList().then(response => {
          if(response.data.code == '0'){
            this.deptTypeData = response.data.data
          }else{
            this.$message.error(response.data.msg)
          }
        })
      }
    }
  }
</script>
